---
name: Size
menu: Usage
route: /usage/size
---

import { Playground } from 'docz';

import ReactWordcloud from '../react-wordcloud';
import words from '../words';

# Size

By default, `react-wordcloud` will inherit the parent's size unless an explicit `size` prop is specified.

## Responsive parent size

This is the default behavior. You can resize the Playground container to watch the wordcloud update when parent size changes.

<Playground>
  <div style={{ backgroundColor: '#efefef', height: '300px', width: '100%' }}>
    <ReactWordcloud words={words} />
  </div>
</Playground>

## Explicit size values

Provide explicit values with the `size` prop. The wordcloud will no longer respond to resizing.

<Playground>
  <ReactWordcloud words={words} size={[400, 400]} />
</Playground>

## Minimum size

You can customize the minimum size by adjusting the `minSize` prop. If the provided `size` or resized values are smaller than `minSize`, it will use the `minSize` value, as demonstrated in the following example (`minSize = [400, 400]`, `size = [100, 100]`).

<Playground>
  <ReactWordcloud words={words} minSize={[400, 400]} size={[100, 100]} />
</Playground>
